<template>
	<view class="tool uni-row uni-center" id="commentElement" :style="objectStyle">
	<!-- 	<view class="zan uni-row uni-center" @click="dianzan">
			<uni-icons type="heart" color="#fff"></uni-icons>
			<text class="color-white font-14">赞</text>
		</view> -->
		<view class="comment uni-row uni-center" @click="handDel">
			<uni-icons type="trash" color="#fff"></uni-icons>
			<text class="color-white font-14">删除</text>
		</view>
	</view>
</template>

<script>
	import * as FindApi from '@/api/find'
	export default {
		name: 'commentPopup',
		data() {
			return {
				commentToolStatus: false,
				objectStyle: {},
				posts_id: 0, // 帖子id
			}
		},
		mounted() {
			// 监听显示点赞/评论浮窗
			uni.$on('showDetetePopup2', this.showCommentPopup);
		},
		methods: {
			dianzan() {
				this.hideCommentPopup();
				uni.showToast({ title: "点赞", icon: "none" })
			},
			// 删除评论
			handDel(e) {
				const app = this
				FindApi.postsCommentDeleted({
					id: app.posts_id, // 帖子id
				}).then(result => {
					console.log(result,'result')
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					this.hideCommentPopup();
				})
				// uni.$emit('commentScrollEvent', {top: e.detail.y, id: this.posts_id, at_id: 0});
			},
			
			showCommentPopup(y) {
			    if (!this.commentToolStatus) {
					this.posts_id = y.id
					const query = uni.createSelectorQuery().in(this).select('#commentElement');
					   query.boundingClientRect((data) => {
					   if (data) {
						 // 获取到 DOM 元素后，修改样式
						 this.objectStyle = {
							 top: `${y.top}px`,
							 width: "160rpx",
							 opacity: 1
						 }
					    }
						console.log("得到布局位置信息11111" + JSON.stringify(data), y);		
						this.commentToolStatus = true;
					  }).exec();
			    } else {
					this.hideCommentPopup();
				}
			},
			
			hideCommentPopup() {
				if (!this.commentToolStatus) return;
				this.objectStyle = {
					 width: "0rpx",
					 opacity: 0
				}
				this.commentToolStatus = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.tool {
		position: absolute;
		right: 120rpx;
		z-index: 999;
		
		width: 0;
		height: 70rpx;
		background-color: #666;
		border-radius: 6rpx;
		opacity: 0;
		transition-property: width, opacity;
		transition-duration: 100ms;
		
		.comment, .zan {
			width: 160rpx;
		}
		
		.zan {
			border-right: 1rpx solid #555;
		}
	}
</style>